<template>
	<view class="container">
		<!-- 顶部导航部分 -->
		<view class="top">
			<view class="bg"></view>
			<view class="title_header">
				<view class="jiantou" @click="back"></view>
				<text>已完成订单</text>
			</view>
		
		
		<!-- 订单信息 -->
		<view>
			<uni-card>
				<view class="dis">
					<text class="message">订单信息</text>
					<text class="finished">已完成</text>
				</view>
				<view class="hang">
					<view class="content">
						<text>订单号：</text>
						<text>121212121212</text>
					</view>
					<view class="content">
						<text>服务项目：</text>
						<text>车辆保养</text>
					</view>
					<view class="content" style="display: flex; align-items: center;">
						<text>服务门店：</text>
						<text>大宝车辆维修店</text>
						<image src="../../static/image/plane.png"></image>
					</view>
					<view class="content">
						<text>下单时间：</text>
						<text>2024-02-09&nbsp;&nbsp;21:20</text>
					</view>
					<view class="content">
						<text>预约时间：</text>
						<text>2024-02-09&nbsp;&nbsp;21:20</text>
					</view>
					<view class="content">
						<text>车辆：</text>
						<text>奔驰FWE4/豫8FHJ</text>
					</view>
					<view class="content">
						<text>备注：</text>
					</view>
				</view>	
				<!-- 订单详情-->
				<view class="message  detail">订单详情</view>
				<view class="hang">
					<view class="kuai">
						<view class="content money">
							<view>车辆精洗</view>
							<view>￥39.90</view>
						</view>
						<view class="content money">
							<view>车辆附加费用</view>
							<view>0</view>
						</view>
					</view>
					<view class="kuai">
						<view class="content money">
							<view>原价</view>
							<view>￥59.90</view>
						</view>
						<view class="content money">
							<view>店家优惠</view>
							<view class="jian">-￥20</view>
						</view>
						
					</view>
					<view class="youhui youhui1">
						<view>优惠券</view>
						<view class="jian">-￥10</view>
					</view>
					<view class="youhui pay">
						<view>支付金额</view>
						<view class="money">￥29.90</view>
					</view>
				</view>
			</uni-card>
		</view>	
			
		
		<view>
			<uni-card>
				<view class="message">
					评价结果
				</view>
				<view class="hang">
					<view class="content">
						<text>评价时间：</text>
						<!-- <text>{{commentResult.commentTime}}</text> -->
						<text>2023-04-10 11:09</text>
					</view>
					<view class="content result">
						<text>评价结果：</text>
			<!-- <uni-rate :readonly="true" size="15" v-model="commentResult.commentScore" @change="onChange" /> -->
						<image src="../../static/image/五星 拷贝 2.png"></image>
						<image src="../../static/image/五星 拷贝 2.png"></image>
						<image src="../../static/image/五星 拷贝 2.png"></image>
						<image src="../../static/image/五星 拷贝 2.png"></image>
						<image src="../../static/image/五星 拷贝 4@2x.png"></image>
					</view>
					<view class="content">
						<text class="judge">评语：</text>
						<!-- <text>{{commentResult.commentContent}}</text> -->
						<text>装逼我让你飞起来！！！</text>
					</view>
				</view>	
			</uni-card>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rateValue: 0,
				//数据的定义
				commentResult:{},
				
				//获取上页传递的数据参数的定义
				lastIndex:0
				
				
			}
		},
		onLoad(options) {
			console.log(options);
			this.lastIndex = options.id;
			this.orderMessage();
		},
		methods: {
			// 请求接口
			orderMessage(){
				uni.request({
					url:"http://localhost:8080/seller/CommentManage/commentResult",
					data:{
						orderId:this.lastIndex
					},
					method:"post",
					header: {
					    'Authorization':'Bearer '+getApp().globalData.userInfo.token
					},
					success:(res) =>{
						console.log("返回的数据",res); 
						this.commentResult=res.data.rows[0]
						
					}
				})
			},
			
			
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			//点击箭头返回上一页面
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.container{
		/* padding-bottom: 30rpx; */
	}
	/* 标题样式 */
	.top{
		width: 750rpx;
		height: 400rpx;
		background-color: #3785f6;
		
	}
	.bg{
		position: absolute;
		z-index: -1;
		background-color: #3785f6;
		width: 750rpx;
		height: 450rpx;
	}
	.title_header{
		display: flex;
		padding-top: 25rpx;
	}
	.title_header>text{
		font-size: 35rpx;
		color: white;
		margin-left: 255rpx;
		margin-bottom: 15rpx;
	}
	.jiantou{
		border-bottom: 6rpx solid white;
		border-left: 6rpx solid white;
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		transform: rotate(45deg);
	}
	
	/* 订单信息 */
	.dis{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}
	.message{
		color: black;
		font-size: 35rpx;
	}
	.finished{
		color: #ff774e;
	}
	
	.hang{
		line-height: 60rpx;
		/* border: 1rpx solid orchid; */
		margin-top: 23rpx;
		border-top: 5rpx solid #d5d5d5;
		padding-top: 20rpx;
	}
	.content{
		margin-bottom: 15rpx;
		display: flex;
	}
	.content .judge{
		display: block;
		width: 200rpx;
	}
	.result{
		display: flex;
		align-items: center;
	}
	.content image{
		width: 26rpx;
		height: 26rpx;
		margin-left: 17rpx;
	}
	
	/* 订单详情 */
	.kuai{
		border-bottom: 1rpx solid #d5d5d5;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
	}
	.detail{
		margin-top: 70rpx;
	}
	.money{
		justify-content: space-between;
	}
	.jian{
		color: red;
	}
	.youhui{
		height: 50rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.youhui1{
		border-bottom: 5rpx solid #d5d5d5;
	}
	.pay{
		margin-top: 35rpx;
	}
	.pay .money{
		font-weight: bold;
		color: black;
		font-size: 40rpx;
	}

</style>
